<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-测量</title>
        <!--引入第三方的jquery脚本库-->
        <script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
        <style type="text/css">
            #main {
                margin: 0 0;
                width: 100%;
                height: 100vh;
            }
            #toolbar-wrapper {
                position: absolute;
                z-index: 9999;
                display: inline-flex;
                overflow-x: hidden;
                overflow-y: visible;
                top: 20px;
                left: 20px;
            }
            .toolbar-item {
                background: #ffffff;
                border: 1px dashed #666666;
                text-align: center;
                font-size: 20px;
                line-height: 20px;
                height: fit-content;
                padding: 6px 16px;
                cursor: pointer;
            }
            #map {
                height: 100vh;
                width: 100%;
            }
            .label{
                color: #3BB2D0;
                font-size: 16px;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-map id="map" 
                :map-style="mapStyle"
                :zoom="mapZoom" 
                :center="outerCenter" 
                :crs="mapCrs"
                v-on:load="handleMapLoad"
                >
                <mapgis-igs-tdt-layer 
                    :layer-id="layerId"
                    :source-id="sourceId" 
                    :baseURL="baseURL" 
                    :token="token" 
                    :crs="mapCrs">
                </mapgis-igs-tdt-layer>
                <mapgis-measure
                    class="custom-measure-wrapper"
                    :measure-mode="measureMode"
                    v-on:added="handleAdded"
                    v-on:measurecreate="handleCreate"
                    v-on:measureresult="handleMeasure"
                    ref="measureref"
                >
                    <div id="toolbar-wrapper">
                        <div class="toolbar-item" v-on:click="toggleQueryLength">长度</div>
                        <div class="toolbar-item" v-on:click="toggleQueryArea">面积</div>
                    </div>
                    <mapgis-marker color="#ff0000" :coordinates="coordinates" v-if="coordinates.length > 0">
                        <div slot="marker" class="label">
                            <div>面积：{{ area }}</div>
                            <div>周长：{{ perimeter }}</div>    
                        </div>
                    </mapgis-marker>
                </mapgis-measure>
            </mapgis-web-map>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        accessToken: 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA', // 使用mapbox样式需要的秘钥
                        mapStyle: {
                            //设置版本号，一定要设置
                            version: 8,
                            //添加来源
                            sources: {},
                            //设置加载并显示来源的图层信息
                            layers: []
                        }, // 地图样式
                        mapZoom: 3, // 地图初始化级数
                        outerCenter: [130, 30], // 地图显示中心
                        mapCrs: 'EPSG:4326',

                        layerId: 'igsLayer_layerId',
                        sourceId: 'igsLayer_sourceId',
                        baseURL: 'http://t2.tianditu.gov.cn/vec_c/wmts', // 请求基地址
                        token: '2ddaabf906d4b5418aed0078e1657029', // 请求天地图的key值
                        controls: {
                            point: false,
                            line_string: false,
                            polygon: false,
                            trash: false,
                            combine_features: false,
                            uncombine_features: false
                        },
                        measureMode: undefined,
                        coordinates: [],
                        area: 0,
                        perimeter: 0
                    };
                },
                methods: {
                    enableMeasure() {
                        const component = this.$refs.measureref;
                        if (component) {
                            component.enableMeasure();
                        }
                    },
                    handleMapLoad(payload) {
                        this.map  = payload.map;
                    },
                    handleAdded(e, data) {
                        const vm = this;
                        let { measure, map } = e;
                        this.measure = measure;
                        vm.map.on('draw.selectionchange', (e) => {
                            const { features, points } = e;
                            const hasLine = (features && (features.length > 0));
                            const hasPoints = (points && (points.length > 0));
                            if (hasLine && ! hasPoints) {
                                // line clicked
                                if (vm.measure.getMode() !== 'direct_select') {
                                    vm.measure.changeMode('direct_select', { featureId: features[0].id });
                                }
                            } else if (hasLine && hasPoints) {
                                // line vertex clicked
                            } else if (! hasLine && ! hasPoints) {
                                // deselected
                            }
                        });
                    },
                    handleCreate(e) {
                        // this.measure && this.measure.deleteAll();
                        console.log('绘制结果', e);
                        this.disableDrag();
                    },
                    handleMeasure(e) {
                        console.log('测量结果', e);
                        this.disableDrag();
                        const coords = e.center.geometry.coordinates;
                        this.coordinates = coords;
                        this.area = e.geographyArea || '无';
                        this.perimeter = e.geographyPerimeter;
                    },
                    toggleQueryLength(e) {
                        this.enableMeasure();
                        this.coordinates = [];
                        this.measureMode = "measure-length";
                        this.measure && this.measure.changeMode('draw_line_string');
                    },
                    toggleQueryArea(e) {
                        this.enableMeasure();
                        this.coordinates = [];
                        this.measureMode = "measure-area";
                        this.measure && this.measure.changeMode('draw_polygon');
                    },
                    disableDrag() {
                        const vm = this;
                        vm.map.on('draw.selectionchange', (e) => {
                            const { features, points } = e;
                            const hasLine = (features && (features.length > 0));
                            const hasPoints = (points && (points.length > 0));
                            if (hasLine && ! hasPoints) {
                                // line clicked
                                if (vm.measure.getMode() !== 'direct_select') {
                                    vm.measure.changeMode('simple_select', { featureIds: [] })
                                    // vm.measure.changeMode('direct_select', { featureId: features[0].id });
                                }
                            } else if (hasLine && hasPoints) {
                                // line vertex clicked
                            } else if (! hasLine && ! hasPoints) {
                                // deselected
                            }
                        });
                    }
                }
            });
        </script>
    </body>
</html>
